<template>
  <div class="main-class" :style="{height:mainHeight+'px'}">
    <!--  头部背景   -->
    <img class="personal-top-background-img" src="../../images/personal-top.png">
    <!--  头像  -->
    <div class="header-img-div" :style="{left:headerImgDivLeft+'px',width:headerImgDivWidth+'px'}">
      <img :src="headerImg">
    </div>
    <!--  昵称  -->
    <p class="nick-name">{{nickName}}</p>
    <!--  手机  -->
    <p class="phone">{{phone}}</p>
    <div class="personal-btn-group">
      <!--   修改密码  -->
      <update-pwd-button class="update-passwd" btnText="修改密码" @click.native="forgetPasswd"></update-pwd-button>
      <!--   退出登录  -->
      <logout-button class="logout" btnText="退出登录" @click.native="logout"></logout-button>
    </div>
  </div>
</template>
<script>
  import UpdatePwdButton from "@/components/UpdatePwdButton";
  import LogoutButton from "@/components/LogoutButton";

  export default {
    data() {
      return {
        mainHeight: 0,
        headerImg: 'http://m.360buyimg.com/n12/jfs/t2644/236/3785042546/83763/7c176038/57986774Nfbb72bd8.jpg!q70.jpg',
        headerImgDivWidth: 0, //头像宽度
        headerImgDivLeft: 0,  //头像左边距
        nickName: '昵称',
        phone: '18210459887'
      }
    },
    components: {
      UpdatePwdButton,
      LogoutButton
    },
    mounted() {
      let that = this;
      that.mainHeight = window.innerHeight - 5;
      that.headerImgDivWidth = 54;
      that.headerImgDivLeft = window.innerWidth / 2 - (that.headerImgDivWidth / 2)
      that.loadUserInfo();
      //设置手机号
      let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
      that.phone = cook.userInfo.phone;
    },
    methods: {
      loadUserInfo() {
        let that = this;
        let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
        that.headerImg = cook.wxInfo.headimgurl;
        that.nickName = cook.wxInfo.nickname;
      },
      forgetPasswd() {
        window.location.href = "forgetpasswd.html";
      },
      logout() {
        let that = this;
        that.$cookies.remove(process.env.VUE_APP_COOKIE_USER_KEY, '/', window.location.host);
        window.location.href = "login.html";
      }
    },
  }
</script>
<style lang="css" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .main-class {
    width: 100%
  }

  .personal-top-background-img {
    width: 100%;
    height: 28%;
  }

  .header-img-div {
    position: fixed;
    background: #323233;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    top: 10%
  }

  .header-img-div img {
    width: 100%;
    height: 100%;
  }

  .nick-name {
    position: fixed;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 17px;
    line-height: 17px;
    top: 20%;
    width: 100%;
    color: white;
  }

  .phone {
    position: fixed;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
    line-height: 13px;
    top: 24%;
    width: 100%;
    color: white;
  }

  .personal-btn-group {
    width: 100%;
    text-align: center;
  }

  .update-passwd {
    margin-top: 24%;
  }

  .logout {
    margin-top: 10%;
  }

</style>
